<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
    <style type="text/css">
      #d_tag2 { position:absolute; z-index:1111; float:left; left:4px; top:2px;  
	          font-size:12px;
              font-family:Verdana, "Lucida Grande", Arial, Helvetica, sans-serif; } 
	  #d_tag2 span { cursor:default; display:inline-block; border:solid 1px #ccc; background-color:#ffffcc; border-radius:5px; padding:2px 4px; margin-right:4px;}
	  
	  .uploadifyDiv{
	  	position: relative;  
	  }
	  
	  .uploadifyDesc{
		position:absolute; 
		left:100px; 
		top:-2px; 
		height:30px; 
		line-height:30px; 
		width:570px; 
		background-color: #f5faff; 
		padding-left: 10px;
		}  
    </style>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/seriesComboBoxs/jquery.seriesComboBoxs.js" charset="utf-8"></script>
    <link href="${pageContext.request.contextPath}/js/uploadify/uploadify.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/uploadify/jquery.uploadify.js"></script>
     
	<script type="text/javascript">
	 $(document).ready(function(){
		 //显示附件列表
		   showFileList();
	       $('#file_upload').uploadify({ 
	    	    //开启调试
	            'debug' : true,
			    'formData':{
			    	"bussId" : '${knowledgeId}', 
	   				"bussType":"1"		
			  	 },  
				'cancelImg': '${pageContext.request.contextPath}/js/uploadify/uploadify-cancel.png', 
				'swf'    : '${pageContext.request.contextPath}/js/uploadify/uploadify.swf',
				'uploader' : '${pageContext.request.contextPath}/upload/fileAction!multipleUpload.action',
				'multi':'true', 
				'buttonText':'', 
				'width': 88, 
			    'height': 26,       
				'removeTimeout' : 2,           //默认进度条延迟消失时间 单位秒
				'queueID':'uploadfileQueue',
				'fileSizeLimit' : '60MB', 
				'fileTypeExts':'*.txt;*.rar;*.zip;*.doc;*.docx;*.xls;*.xlsx;*.jpg;*.jpeg;*.gif;*.png',
				 'queueSizeLimit' : 10, 
				 'overrideEvents':['onSelectError'],  
				'onQueueComplete':function(queueData){
					//刷新附件列表 
					$("#divDatagrid").css("display","block"); 
					showFileList();
				},
				 //返回一个错误，选择文件的时候触发
		        'onSelectError':function(file, errorCode, errorMsg){
		            switch(errorCode) {
		                case -100:
		                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
		                    break;
		                case -110:
		                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
		                    break;
		                case -120:
		                    alert("文件 ["+file.name+"] 大小异常！");
		                    break;
		                case -130:
		                    alert("文件 ["+file.name+"] 类型不正确！");
		                    break;
		            }
		            return;
		        },
		        //检测FLASH失败调用
		        'onFallback':function(){
		            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
		        },
		        //上传到服务器，服务器返回相应信息到data里
		        'onUploadSuccess':function(file, data, response){
		            //alert(data);
		        },
		        //某个文件开始上传的时候触发
		        'onUploadStart' : function(file) {
		        	$("#divNoneData").css("display","none"); 
		        }
			}); 
		 
		//增加隔行变色效果
   	     $(".listtable").zebra();
		 $.seriesComboBoxs({
		 		selects : ["#firstSelect","#secondSelect"],
		 		defaultParentId : 500,
		 		ajaxOptions : {"url" : "${pageContext.request.contextPath}/knowledgebase/knowlegeAction!initSeriesComboBoxs.action?codeType=knowledgeType&tableName=TD_KNOWLEDGE_MANAGER"},
		 		jsonField : {
					region_id : "codeValue",
					region_name : "codeName",
					parent_id : "parentId"
				},
			    listeners : {
						render : function(){
							$("#secondSelect").hide(); 
						},
						optionClick : function(index,option,aSelect){
							if(index==0&&option[0].value!=''){
								$("#secondSelect").show();
							}
							if(index==0&&option[0].value==''){
								$("#secondSelect").hide(); 
							}
						} 
				  }
			});
		 
	//	$('#txtTag2').blur(formatTag2).keydown(tagKeydown);
		 $('#txtTag2').blur(formatTag2); 
	 });
	  
	 function formatTag2(flag) {
	   	    if ($.trim($('#txtTag2').val())) { 
	        var tt = '';
	        $('#d_tag2 span').each(function () {
	            tt += this.innerHTML + ',';
	        });
	        tt += $.trim($('#txtTag2').val()).replace(/[^\u4e00-\u9fa5\w\s\-+.#,，]+/g, '');
	        tt = $.trim(tt).split(/[,，]+/g);
	        var s = [];
	        for (var i = 0; i < tt.length; i++) {
	            if (!s.has(tt[i])) {
	                s.push($.trim(tt[i]).slice(0, 15));
	            }
	            if (s.length == 3) break;
	        }
	        var str = '';
	        for (var i = 0; i < s.length; i++) {
	            str += '<span>' + s[i] + '</span>';
	        }
	        $('#d_tag2').html(str);
	        $('#d_tag2 span').click(function () {
	            $(this).remove();
	            formatTag2();
	        }).attr('title', '单击删除该标签');
	    }
	    var w = $('#d_tag2').width();
	    $('#txtTag2').css('width',(566-w)+'px');     
	    $('#txtTag2').css('padding-left',(w + 2)+'px'); 
	    $('#txtTag2').val(' ');   
	    
	    getKeywords();
	} 
		function tagKeydown(ev) {
		    var code = (ev ? ev.which : event.keyCode);
		    if (code == 8) {
		        //如果是退格键
		        var ss = $('#d_tag2 span');
		        if (ss.length > 0) {
		            ss.eq(ss.length - 1).empty();
		            formatTag2();
		        }
		    }
		}

		Array.prototype.has = function (a) {
		    for (var i = 0; i < this.length; i++) {
		        if (this[i].toLowerCase() == a.toLowerCase())
		            return true;
		    }
		    return false;
		};
		
		function getKeywords(){
			var keywords = [];
			var words = $("#d_tag2").find("span");
			words.each(function(){
				keywords.push($(this).html());
			});
			var k = keywords.join(",");
			$("#handleKeyWord").val(k);
		} 

		
		
		  //显示附件列表
	    function showFileList() {
	   		//刷新页面  problemmgr
	   		$('#table_datagrid').datagrid({
	   			url:'${pageContext.request.contextPath}/upload/fileAction!toListUploadFiles.action',
	   			queryParams:{
	   				"bussId" : '${knowledgeId}',
	   				"bussType":"1"	
	   			},
	   			fit:true,
	   			border:false,
	   			fitColumns:true,
	   			pagination:false,
	   			pageList:[10,20,30],
	   			rownumbers:false,
	   			singleSelect:true,                   
	   			autoRowHeight:true,
	   			sortName:'uploadTime',
	   			sortOrder:'desc', 
	   			onLoadSuccess:function(data){
	   				if(data.rows.length==0){                              //判断是否有值 没值隐藏该datagrid 并显示提上上传的图片
	   					$("#divDatagrid").css("display","none"); 
	   					$("#divNoneData").css("display","block");
	   				}else{
	   					$("#divNoneData").css("display","none"); 
	   				}
	   			},
	   			columns:[[{
	   				field:'fileName',
	   				title:'附件名称',
	   				width:200 
	   			},{
	   				field:'uploadUserName',
	   				title:'上传人',
	   				width:60
	   			 },{
	   				field:'fileSize',
	   				title:'附件大小',
	   				width:60
	   			 },{
	   				field:'uploadTime',
	   				title:'上传时间',
	   				width:150 
	   			},{
	   				field:'fileId',
	   				title:'操作',
	   				width:150,
	   				align:'center', formatter: function (fileId,rowData,rowIndex){  
							return '<span  style="cursor:pointer" onclick="downLoadFile(\''+fileId+'\')" )"><img onclick="downLoadFile(\''+fileId+'\')" src="${pageContext.request.contextPath}/images/icons/downFile.png" title="下载" alt="下载"/>下载</span>'
	   						    + '<span  style="cursor:pointer" onclick="doDeleteFile(\''+fileId+'\')"><img onclick="doDeleteFile(\''+fileId+'\')" src="${pageContext.request.contextPath}/images/icons/delete.png" title="删除" alt="删除"/>删除</span>'; 
	   				}
	   			}]],
	   		});  
	   	}
		  
		  
		  
	  //附件下载
		function downLoadFile(fileId){
			$("#fileDownFrame").attr("src","${pageContext.request.contextPath}/upload/fileAction!toDownLoadFile.action?fileId="+fileId);
		}
	    
	     //删除附件
	   	function doDeleteFile(fileId){
	        var pars="fileId="+fileId;
	   		$.messager.confirm('删除确认', '确定要删除该条记录吗？',function(r){
	   			if(r){ 
		   			$.ajax({
		   				 url :'${pageContext.request.contextPath}/upload/fileAction!toDeleteFile.action',
		   				 data:pars,
		   				 dataType :'json',
		   				 success : function(data){
		   					 if(data=='success'){
		   						//重新刷新表格
		   						 showFileList();
		   					 }else{
		   						 alert('error');
		   					 }
		   				 }
		   	   }); 
	   			}
	   		});
	   	}
		
	</script>
    <!-- 新建知识库 -->
   <div class="easyui-tabs" style="width:auto;height:400px">
	<div title="基本信息" style="padding:0px">
		<form id="framework_user_addform" method="post">  
     <table border="0" cellpadding="0" cellspacing="0" height="100%"  width="100%" class="listtable">
		<tr>
		    <td height="40px" style="text-align:right;width:15%" nowrap="nowrap"><span style="color:red;font-size:15px">*</span>知识名称：&nbsp;</td>
			<td height="28px;" width="140px" colspan="3"> 
				<input   id="framework_userid" type="text" name="knowledgeName"  maxlength="30"  class="easyui-validatebox"  data-options="required:true,missingMessage:'知识名称必须填写'"/>
			</td>
			<input type="hidden" name="knowledgeSource" value="4"/> 
			<input type="hidden" id="handleKeyWord" name="keyWord"/>
			<input type="hidden" name="knowledgeId" value="${knowledgeId}"/>
		</tr>
		
		<tr>
			<td height="40px" style="text-align:right" nowrap="nowrap"><span style="color:red;font-size:15px">*</span>知识类型：&nbsp;</td>
			<td colspan="3" style="height:40px;width:500px"> 
					<select id="firstSelect" name="knowledgeOneType"  style="width:163px; height:23px; border:solid 1px #ccc; color:#666; line-height:25px;" style="width:120px" class="easyui-validatebox"  data-options="required:true,missingMessage:'一级知识类型必须填写'">
    					<option value="">请选择</option>
    				</select>  
    				<select id="secondSelect" name="knowledgeTwoType" style="width:163px; height:23px; border:solid 1px #ccc; color:#666; line-height:25px;" class="easyui-validatebox"  data-options="required:true,missingMessage:'二级知识类型必须填写'">
    					<option value="">请选择</option>
    				</select>
			</td>
		</tr>
		
		<tr>
			<td height="40px" style="text-align:right;" nowrap="nowrap"><span style="color:red;font-size:15px">*</span>关键词：&nbsp;</td>
			<td height="60px" colspan="3"> 
				<div style="position:relative;">
					<div id="d_tag2"></div>  
					<input type="text" id="txtTag2" style="width: 566px;height:23px;border:solid 1px #ccc; color:#666;" maxlength="100">
				</div>  
				<div style="color:#999 !important;margin-top:5px">单个tag不多于15个字符，多个关键字请用","分隔，最多填写3个,点击删除标签</div> 
			</td>
		</tr> 
		 
		<tr>
			<td height="90px" style="text-align:right" nowrap="nowrap"><span style="color:red;font-size:15px">*</span>知识描述：&nbsp;</td>
			<td height="90px" colspan="3">
				<textarea id="framework_userdetailinfo" name="knowledgeDesc" class="easyui-validatebox" data-options="required:true,validType:'length[0,20000]',missingMessage:'知识描述必须填写'" style="width:570px;height:80px;"></textarea>
			</td>
		</tr>  
		<tr>  
			<td height="90px" style="text-align:right" nowrap="nowrap"><span style="color:red;font-size:15px">*</span>解决方案：&nbsp;</td> 
			<td height="90px" colspan="3">  
				<textarea id="framework_signatureinfo" name="solution" class="easyui-validatebox" data-options="required:true,validType:'length[0,20000]',missingMessage:'解决方案必须填写'" style="width:570px;height:80px;"></textarea>
			</td>
		</tr>
     </table>
   </form> 
	</div>
	<div title="附件上传" style="padding:10px;">
	        <br/>
			<form class="uploadifyDiv">
				<input id="file_upload" name="Filedata"  type="file">  
				<div class="uploadifyDesc">你可以同时上传10个附件;格式为txt,rar,zip,doc,docx,xls,xlsx,jpg,jpeg,gif,png;每个附件不大于60M!</div>
				<!-- 用于显示进度条 -->
				<div id="uploadfileQueue"></div>    
			</form> 
		  <br/>
		  <div data-options="region:'center'" style="height:250px;width:100%;" id="divDatagrid">     
	          <table id="table_datagrid" style="height:auto" > 
			 </table> 
	      </div>  
	      <div id="divNoneData" style="width:300px; height:150px;text-align:center; padding-top:50px;margin:0px auto;"><img src="${pageContext.request.contextPath}/js/uploadify/fjnone.png"/></div>
		<iframe id="fileDownFrame" src="" style="display:none; visibility:hidden;"></iframe> 
	</div>
   </div>
  
